<template>
  <div class="character">
    <ul class="Icon">
      <li>
        <div class="image icon-juese" @click="role"></div>
        角色
      </li>
      <li>
        <div class="image icon-zuozhe" @click="author"></div>
        作者
      </li>
      <li>
        <div class="image icon-shengyou" @click="dubbing"></div>
        声优
      </li>
    </ul>
    <ul class="hotspot">
      <li v-for="(item, index) in image" :key="index">
        <div class="title">
          <p>{{ item.name }}</p>
          <p>{{ item.time }}</p>
          <div>
            <span>{{ item.quantity }}</span>
          </div>
        </div>
        <div class="imgs">
          <img :src="item.url" alt="" />
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      image: [
        {
          name: "完美世界登场人物",
          url: "https://image.32yx.com/news/6v9fl4wf.jpg",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
        },
        {
          name: "完美世界登场人物",
          url: "https://image.32yx.com/news/6v9fl4wf.jpg",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
        },
        {
          name: "完美世界登场人物",
          url: "https://image.32yx.com/news/6v9fl4wf.jpg",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
        },
        {
          name: "完美世界登场人物",
          url: "https://image.32yx.com/news/6v9fl4wf.jpg",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
        },
        {
          name: "完美世界登场人物",
          url: "https://image.32yx.com/news/6v9fl4wf.jpg",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
        },
        {
          name: "完美世界登场人物",
          url: "https://image.32yx.com/news/6v9fl4wf.jpg",
          time: "完美世界石昊：本书主角，被敌对石族的人称为“罪”血后代，在上界化名荒。",
          quantity: "代表作品《完美世界》等",
        },
      ],
    };
  },
  methods: {
    role() {
      this.$router.push("/find/role");
    },
    author() {
      this.$router.push("/find/author");
    },
    dubbing() {
      this.$router.push("/find/dubbing");
    },
  },
};
</script>
<style lang="less">
.character {
  padding: 60px 0;
  .Icon {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 2%;
    li {
      width: 25%;
      font-size: 14px;
      margin: 2% 0;
      text-align: center;
      div {
        margin: 1% auto;
        width: 42px;
        height: 42px;
        background-image: url(../../assets/咨询.png);
        background-size: 670%;
        background-repeat: no-repeat;
      }
      .icon-juese {
        background-position: 52% 40%;
      }
      .icon-zuozhe {
        background-position: 34% 101%;
      }
      .icon-shengyou {
        background-position: 69% 60%;
      }
    }
  }
  .hotspot {
    width: 96%;
    margin: 0 auto;
    height: 100vh;
    li {
      font-size: 14px;
      height: 16%;
      margin: 5% 0;
      &:nth-last-child(1) {
        padding-bottom: 70px;
      }
      .title {
        width: 68%;
        height: 100%;
        margin-left: 5%;
        display: inline-block;
        position: relative;
        p {
          margin: 0;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          word-wrap: break-word;
          word-break: break-all;
          -webkit-box-orient: vertical;
          text-overflow: ellipsis;
          overflow: hidden;
          color: #555;
          &:nth-child(1) {
            font-weight: 600;
          }
        }
        div {
          width: 100%;
          position: absolute;
          bottom: 0;
          font-size: 12px;
          color: #999;
        }
      }
      .imgs {
        float: left;
        height: 100%;
        width: 25%;
        position: relative;
        overflow: hidden;
        img {
          width: 100%;
          position: absolute;
          top: -10%;
          left: 0;
        }
      }
    }
  }
}
</style>